﻿<!DOCTYPE HTML>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="_header :: common_header(~{::title},~{::link},~{})">
    <title>项目信息</title>
</head>
<body>
<nav class="breadcrumb">
    <i class="Hui-iconfont">&#xe67f;</i> 首页 <span class="c-gray en">&gt;</span>
    项目信息<a class="btn btn-success radius r"
           style="line-height: 1.6em; margin-top: 3px"
           href="javascript:location.replace(location.href);" title="刷新"><i
        class="Hui-iconfont">&#xe68f;</i></a>
</nav>

<div class="page-container">
    <div class="text-c">
        <a class="btn btn-primary radius" data-title="添加项目"
           onclick="program_add('添加项目','add')" href="javascript:;"><i
                class="Hui-iconfont">&#xe600;</i> 添加项目</a>

        <input
                type="text" name="programName" id="programName" placeholder="项目名称-模糊查询"
                style="width: 150px" class="input-text"></input>

        <button name="" id="" class="btn btn-success" onclick="Search()">
            <i class="Hui-iconfont">&#xe665;</i> 查询
        </button>
        <button onclick="removeIframe()" class="btn btn-primary radius">关闭</button>

    </div>
    <div class="mt-20">
        <table
                class="table table-border table-bordered table-bg table-hover table-sort table-responsive"
                id="dataGrid">
        </table>
    </div>
</div>
<div th:replace="_list_footer :: foot"></div>
<script type="text/javascript">
    $(function () {
        //初始数据
        initDataGrid();
    })

    function initDataGrid() {
        $("#dataGrid").bootstrapTable({
            method: "GET",
            contentType: "application/x-www-form-urlencoded",
            dataType: "json",
            url: '../programInfo/programInfoList',
            queryParams: queryParams,
            queryParamsType: '',
            pagination: true,//显示分页条页码
            striped: true,//隔行变色
            pageNumber: 1,//首页页码
            pageSize: 10,//每页数据条数
            uniqueId: "programInfoId",
            sidePagination: "server",//在服务器分页
            toolbar: "#toolbar",//工具栏
            columns: [{
                title: "项目编码",
                field: "programId",
                width: 80
            }, {
                title: "项目名称",
                field: "programName",
                class: 'colStyle',
                width: 120
            }, {
                title: "Key",
                field: "programKey",
                width: 290
            }, {
                title: "Secret",
                field: "programSecret",
                width: 300
            }, {
                title: "录入时间",
                field: "createTime",
                width: 150,
                //——修改——获取日期列的值进行转换
                formatter: function (value, row, index) {
                    return changeDateFormat(value)
                }
            }, {
                title: "项目介绍",
                field: "programDes",
                class: 'colStyle',
                formatter: paramsMatter
            }, {
                field: 'action',
                title: '操作',
                width: 80,
                halign: 'center',
                align: 'center',
                formatter: actionFormatter,
                events: 'actionEvents',
                clickToSelect: true
            }
            ]

        });
    }

    function changeDateFormat(cellval) {
        if (cellval != null) {
            var date = new Date(cellval);
            var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
            var currentDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();

            var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
            var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
            var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();

            return date.getFullYear() + "-" + month + "-" + currentDate + " " + hours + ":" + minutes + ":" + seconds;
        }
    }

    /*  鼠标划过显示隐藏内容 */
    function paramsMatter(value, row, index) {
        if (value) {
            var span = document.createElement('span');
            span.setAttribute('title', value);
            span.innerHTML = value;
            return span.outerHTML;
        }
    }

    function actionFormatter(value, row, index) {

        var htm = "<a title=\"设备详情\" data-href=\"deviceInfo/list?programId="
            + row.programId
            + "&programName="
            + row.programName
            + "\" data-title=\""
            + row.programName
            + "\" href=\"javascript:void(0)\" onClick=\"code_show(this)\" class=\"ml-5\" style=\"text-decoration:none\">"
            + "<i class=\"Hui-iconfont\">&#xe665;</i></a>"
            + "<a style=\"text-decoration:none\" class=\"ml-5\" onClick=\"programInfo_edit('编辑项目','edit','"
            + row.programId
            + "')\" href=\"javascript:;\" title=\"编辑\"><i class=\"Hui-iconfont\">&#xe6df;</i></a>"
            + "<a style=\"text-decoration:none\" class=\"ml-5\" onClick=\"programInfo_del(this,"
            + row.programId
            + ")\" href=\"javascript:;\" title=\"删除\"><i class=\"Hui-iconfont\">&#xe6e2;</i></a>";
        return htm;
    };

    /*删除*/
    function programInfo_del(obj, id) {
        layer.confirm('确认要删除吗？', function (index) {
            $.ajax({
                type: 'POST',
                async: true,
                url: "delete?programId=" + id,
                dataType: 'json',
                success: function (data) {
                    $('#dataGrid').bootstrapTable('refresh');
                },
                error: function (data) {
                    alert(JSON.stringify(data));
                },
            });
            layer.close(index);
        });
    }

    function queryParams(params) {
        var param = {
            rows: params.limit,
            sort: params.sort,
            sortOrder: params.order,
            offset: params.offset,
            pageSize: params.pageSize,
            pageNum: params.pageNumber,
            programName: $("#programName").val()
        };

        return param;
    }

    //查询
    function Search() {
        $('#dataGrid').bootstrapTable('refresh');
    }


    /*添加*/
    function program_add(title, url, w, h) {
        var index = layer.open({
            type: 2,
            title: title,
            content: url,
            end: function () {//无论是确认还是取消，只要层被销毁了，end都会执行，不携带任何参数。layer.open关闭事件
                $('#dataGrid').bootstrapTable('refresh');
            }
        });
        layer.full(index);
    }

    function programInfo_edit(title, url, id, w, h) {
        var index = layer.open({
            type: 2,
            title: title,
            content: url + "?programId=" + id,
            end: function () {//无论是确认还是取消，只要层被销毁了，end都会执行，不携带任何参数。layer.open关闭事件
                $('#dataGrid').bootstrapTable('refresh');
            }
        });
        layer.full(index);
    };


    function code_show(obj) {
        Hui_admin_tab(obj);
    };
</script>
</body>
</html>